<template>
<l-layout >
    <l-panel style="padding:0;" >
        <template #toolLeft >
            <div class="l-panel--item" >
                <el-radio-group v-model="categoryId" size="mini" @change="handleCaregoryChange" >
                    <el-radio-button label="1">{{ $t('Login') }}</el-radio-button>
                    <el-radio-button label="2">{{ $t('访问') }}</el-radio-button>
                    <el-radio-button label="3">{{ $t('操作') }}</el-radio-button>
                </el-radio-group>
            </div>
            <div class="l-panel--item" style="width:344px;" >
                <el-date-picker
                    v-model="operateTime"
                    size="mini"
                    type="daterange"
                    align="right"
                    unlink-panels
                    :range-separator="$t('至')"
                    :start-placeholder="$t('开始日期')"
                    :end-placeholder="$t('结束日期')"
                    :picker-options="pickerOptions"
                    
                    @change="handleDateChange"
                    >
                </el-date-picker>
            </div>
            
            <div class="l-panel--item" >
                <el-input :placeholder="$t('please enterIP/功能/类型')" v-model="keyWord" size="mini" @keyup.enter.native="hanleSearch" >
                    <el-button slot="append" icon="el-icon-search" @click="hanleSearch" ></el-button>
                </el-input>
            </div>
        </template>
        <l-table 
            :loading="tableLoading"
            :columns="columns" 
            :dataSource="tableData" 
            row-key="f_Id"
            :isPage="true"
            :pageTotal="tableTotal"

            @loadPageData="turnTablePage"
             >
            <template v-slot:f_OperateTime="scope" >
                {{lr_dateFormat(scope.row.f_OperateTime)}}
            </template>
            <template v-slot:f_Category="scope" >
                {{lr_dataItemDetailsName('FormSort',scope.row.f_Category)}}
            </template>
             <template v-slot:f_ExecuteResult="scope" >
                <el-tag v-if="scope.row.f_ExecuteResult == 1" size="mini" type="success">{{$t('成功')}}</el-tag>
                <el-tag v-else size="mini" type="danger">{{$t('失败')}}</el-tag>
            </template>
        </l-table>
    </l-panel>
</l-layout>
</template>

<script>
const api = window.$api.system.log
export default {
  name:'user-log',
  props: {
  },
  data () {
    return {
        categoryId:'1',
        operateTime:null,
        pickerOptions: {
          shortcuts: [{
            text: this.$t('最近一周'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: this.$t('最近一个月'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: this.$t('最近三个月'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

        // 表格
        columns: [
            {label:'时间',prop:'f_OperateTime',width:'160'},
            {label:'用户',prop:'f_OperateAccount',width:'80',align:'center'},
            {label:'IP',prop:'f_IPAddress',width:'100'},
            {label:'功能',prop:'f_Module',width:'160'},
            {label:'类型',prop:'f_OperateType',width:'64',align:'center'},
            {label:'结果',prop:'f_ExecuteResult',width:'64',align:'center'},
            {label:'描述',prop:'f_ExecuteResultJson',minWidth:'150'},
        ],
        tableLoading:false,
        tableTotal:0,
        tablePageSize:50,
        tableCurrentPage:1,
        tableData: [],
        keyWord:'',
    };
  },
  created () {
      this.loadTablePageData();
  },
  mounted () {
  },
  computed:{
  },
  methods:{
    loadTablePageData(){
        this.tableLoading = true;
        let queryData = {
            rows:this.tablePageSize,
            page:this.tableCurrentPage,
            sidx:'F_OperateTime DESC',
            categoryId:this.categoryId,
            keyword:this.keyWord,
            startTime:this.operateTime?this.operateTime[0]:null,
            endTime:this.operateTime?this.operateTime[1]:null,
            //operateAccount:this.loginInfo.f_Account

        }
        api.getMyPage(queryData).then(res=>{
            const data = this.$deepClone(res.data.data);
            this.tableData = data.rows;
            this.tableTotal = data.records;

            this.tableLoading = false;

        }).catch(()=>{
            this.tableData = [];
            this.tableLoading = false;
        });
    },
    turnTablePage({rows,page}){
        this.tablePageSize = rows;
        this.tableCurrentPage = page;
        this.loadTablePageData();
    },

    handleCaregoryChange(){
        this.loadTablePageData();
    },
    handleDateChange(){
        this.loadTablePageData();
    },

    hanleSearch(){
        this.loadTablePageData();
    }
  }
}
</script>